<template>
  <view class="container">
    <view class="success-message">
      <text class="text">下单成功</text>
    </view>
    <button class="order-button" @click="goToAllOrder">查看订单</button>
  </view>
</template>

<script>
export default {
  methods: {
    goToAllOrder() {
      uni.navigateTo({
        url: `/pages/AllOrderPage/AllOrderPage?tab=product&orderType=8`
      })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150rpx;
  /* 距离顶部增加一些边距 */
  box-sizing: border-box;
}

.success-message {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80rpx;
  /* 成功提示和按钮之间的距离 */
}

.icon {
  font-size: 50rpx;
  /* 图标大小 */
  margin-right: 20rpx;
  /* 图标和文字的间距 */
  color: #07c160;
  /* 绿色，表示成功 */
}

.text {
  font-size: 48rpx;
  /* 较大字号 */
  font-weight: bold;
  /* 加粗 */
  color: #333;
  /* 深灰色文字 */
}

.order-button {
  width: 350rpx;
  /* 按钮宽度 */
  height: 88rpx;
  /* 按钮高度 */
  line-height: 88rpx;
  /* 使文字垂直居中 */
  font-size: 32rpx;
  /* 按钮文字大小 */
  color: #ffffff;
  /* 白色文字 */
  background-color: #0F4C97;
  /* 修改为蓝色主色调 */
  border-radius: 44rpx;
  /* 圆角 */
  text-align: center;
  /* 文字居中 */
  /* 可以添加一些阴影效果 */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

/* 按钮按下时的效果 */
.order-button:active {
  background-color: #0d4080;
  /* 按下时颜色变深 (深蓝色) */
}
</style>
